<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <button @click="reverseMessage">反转消息</button>
      <h1>第一、处理用户输入 v-model，主要用户表单, 是数据双向绑定的代码实现</h1>
      {{msg}}
      <input type="text" v-model="msg" />
      <button @click="handleSubmit">提交</button>
      <h2>todos:</h2>
      <ul>
        <li :class="item.status? 'active': '' " v-for="(item, index) in todos" @click="handleToggleItem(item)">
          {{index+1}}、 {{item.msg}}
          <button style="color: red" @click.stop="handleRemoveClick(index)">删除按钮</button>
        </li>
      </ul>
    </div>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        // 1. 挂载元素
        el: '#app',
        // 2. 数据仓库
        data() {
          return {
            msg: 'Hello App!',
            message: 'Hello Vue.js!',
            todos: [
              // { status: false, msg: '三天学会vue!' },
              // { status: false, msg: '3天学会react' },
              // { status: false, msg: '7天精通面试' },
            ],
          }
        },
        // 生命周期-给你一个函数，让你放置自己的方法
        created() {
          // created 方法，在初始化数据的时候，
          this.getData()
        },
        // 3. 方法仓库
        methods: {
          // 借助axios请求数据，并且在生命周期中调用这个方法，
          getData() {
            axios.get('./data.json').then((res) => {
              console.log(res.data, 'res')
              // 把请求到的数据，赋值给要渲染的todos数组
              this.todos = res.data
            })
          },
          // 删除点击到的每一条数据
          handleRemoveClick(index) {
            // 因为当前按钮在 li内部，但是li上面已经绑定了点击事件，当我们点击内部button的时候，button的事件，就会冒泡
            // 到父级li上，让li的事件也生效了，
            // 如何解决以上问题？
            // ⭐️ vue的事件修饰符 ⭐️ 可以帮助我们快速解决以上问题
            console.log(index, 'index')
            this.todos.splice(index, 1)
          },
          // 改变每一条数据的状态
          handleToggleItem(item) {
            item.status = !item.status
          },
          handleSubmit() {
            // v-model快速实现表单数据 获取 和 渲染 --> 获取-设置
            console.log(this.msg) // 获取到值，然后提交给后端
            this.todos.push({ status: false, msg: this.msg })
            //
            this.msg = ''
          },
          reverseMessage() {
            // 页面上都是dom  数据驱动dom,现在只要改变数据就可以了
            this.message = this.message.split('').reverse().join('')
            console.log(this.message.split('').reverse().join(''))
          },
        },
      })

      console.log(vm, 'vm')
    </script>
  </body>
</html>
